{% extends 'base.html' %}
{% load staticfiles %}
{%block header  %}
    <link rel="stylesheet" type="text/css" href="{% static 'css/public.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'css/proList.css' %}">

{% endblock header %}
{% block main %}
    <div class="order cart mt">
			<!-----------------site------------------->
			<div class="site">
				<p class="wrapper clearfix">
					<span class="fl">订单确认</span>
				</p>
			</div>
			<!-----------------orderCon------------------->
			<div class="orderCon wrapper clearfix">
				<div class="orderL fl">
					<!--------h3---------------->
					<h3>收件信息</h3>
					<!--------addres---------------->
					<div class="addres clearfix">
						<div class="addre fl on">
							<div class="tit clearfix">
								<p class="fl"><span id="name_address">{{ user }}</span>
									<span class="default">[默认地址]</span>
								</p>
							</div>
							<div class="addCon">
								<p id="address_address">{{ address.address }}</p>
								<p id="phone_address">{{ address.phone }}</p>
							</div>
						</div>
					</div>
					<h3>支付方式</h3>
					<!--------way---------------->
					<div class="way clearfix">
						<img class="on" src="/static/images/way01.jpg" name="alipay">
						<img src="/static/images/way02.jpg" name="wechat">
						<img src="/static/images/way03.jpg" name="union">

					</div>

					<!--------dis---------------->

				</div>
				<div class="orderR fr">
					<div class="msg">
						<h3>订单内容</h3>
						<!--------ul---------------->


                        {% for cartitem in cartitems %}
          <ul class="clearfix" goodsid="{{ cartitem.goodsid }}" sizeid="{{ cartitem.sizeid }}" colorid="{{ cartitem.colorid }}" count="{{ cartitem.count }}">
							<li class="fl">
								<img src="{{ MEDIA_URL }}{{ cartitem.color.value }}" width="87px" height="87px">
							</li>
							<li class="fl">
								<p>{{ cartitem.goods.desc|truncatechars:20 }}</p>
								<p>颜色分类：{{ cartitem.color.name }}</p>
								<p>数量：{{ cartitem.count }}</p>
							</li>
							<li class="fr">￥{{ cartitem.total_price }}</li>
						</ul>
                        {% endfor %}






					</div>
					<!--------tips---------------->
					<div class="tips">
						<p><span class="fl">商品金额：</span><span class="fr">￥{{ totalprice }}</span></p>
						<p><span class="fl">优惠金额：</span><span class="fr">￥0.00</span></p>
						<p><span class="fl">运费：</span><span class="fr">免运费</span></p>
					</div>
					<!--------tips count---------------->
					<div class="count tips">
						<p><span class="fl">合计：</span><span class="fr">￥{{ totalprice }}</span></p>
					</div>
					<!--<input type="button" name="" value="去支付"> -->
					<a href="" id="pay" class="pay" onclick="javascript:void(0);">去支付</a>
				</div>
			</div>
		</div>
{% endblock main %}

{% block footerjs %}
    <script src="/static/js/public.js" type="text/javascript" charset="utf-8"></script>
    <script src="/static/js/pro.js" type="text/javascript" charset="utf-8"></script>
    <script src="/static/js/user.js" type="text/javascript" charset="utf-8"></script>

    <script>
        $("#pay").click(function(){
            cartitems = []
            {#点击去支付按钮后,会先将已购商品的各项参数放在一个空列表里#}
            $.each($('.msg ul'),function(index,item){
                cartitems.push({"goodsid":$(item).attr('goodsid'),
                                "sizeid":$(item).attr('sizeid'),
                                "colorid":$(item).attr('colorid'),
                                "count":$(item).attr('count')
                                })

            })


            //这里使用url链接传参的方式往后台传递参数,所需要先拼接请求的参数,并且使用json序列化
            var params = 'address={{ address.id }}&payway='+$('.way .on').attr('name')+'&cartitems='+JSON.stringify(cartitems)

            //参数拼接完毕后,需要拼接请求地址
            var url = '/order/toorder/?'+params
            //最后把一个完整的带参数路径传会后台
            $(this).attr('href',url)

        })

    </script>
{% endblock footerjs %}